<template>
  <div class="layout">
    <a-switch v-model:checked="checked" @change="onChangeSwitch" />
    <a-input-number id="inputNumber" v-model:value="value" :min="1" :max="100" />
    <a-button type="primary" @click="onAddCode">
      创建下载码
    </a-button>
    <a-button type="primary" @click="onCopy" id="copy">
      一键复制
    </a-button>
    <a-popconfirm title="您确定要删除此应用吗?" ok-text="是" cancel-text="否" @confirm="onDeleteCode">
      <a-button type="danger">
        一键删除
      </a-button>
    </a-popconfirm>
  </div>
  <a-divider />
  <a-table :columns="columns" :data-source="codedata" :loading="loading" @change="onClickPagination" :pagination="paginations">
    <template #time="{text}">
      {{FormatTime(text)}}
    </template>
    <template #delete="{record}">
      <a-button type="danger" @click="onDeleteOneCode(record)">
        删除
      </a-button>
    </template>
  </a-table>
</template>

<script lang='ts'>
import { reactive, toRefs } from "vue";
import { addCode, deCodeAll, deCodeOne, getCodeAll } from "@/api/codeApi/index";
import { $message } from "@/components/AntDesign/message";
import ClipboardJS from "clipboard";
import { AxiosResponse } from "axios";
import { upsuper } from "@/api/superApi";
import { upipa } from "@/api/ipaApi";
import { upapk } from "@/api/apkApi";
import createStore from "@/store/index";
import { FormatTime } from "@/CommonAssets/index";
import { upmiao } from '@/api/miaoApi';
const columns = [
  {
    title: "下载码",
    dataIndex: "code",
    align: "center",
    slots: { customRender: "code" },
  },
  {
    title: "创建时间",
    dataIndex: "time",
    align: "center",
    slots: { customRender: "time" },
  },
  {
    title: "删除",
    dataIndex: "delete",
    align: "center",
    slots: { customRender: "delete" },
  },
];
export default {
  name: " 下载码",
  props: {
    drawerdata: Object,
  },
  setup(props: any) {
    const data = reactive({
      value: 1,
      codedata: [],
      loading: false,
      checked: props.drawerdata.codestatus,
      paginations: {
        total: 0,
        pageSize: 10,
        hideOnSinglePage: true,
        current: 1,
      },
    });

    /* 查询请求 */
    async function getRequest(lid: string, pageNo = 1) {
      try {
        data.loading = true;
        const reslut: AxiosResponse<any> = await getCodeAll({
          lid,
          pageNo,
          pageSize: data.paginations.pageSize,
        });
        reslut.data.data.forEach((element: any) => {
          element.key = element._id;
        });
        data.paginations.total = reslut.data.total;
        data.codedata = reslut.data.data;
        data.loading = false;
      } catch (error) {
        $message("error", error.data.message);
      }
    }
    getRequest(props.drawerdata.lid);

    /* 删除全部请求 */
    async function deleteRequest(lid: string) {
      try {
        const reslut: AxiosResponse<any> = await deCodeAll({ lid });
        getRequest(props.drawerdata.lid, data.paginations.current);
        $message("success", reslut.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 删除单条请求 */
    async function deleteOneRequest(id: string) {
      try {
        const reslut: AxiosResponse<any> = await deCodeOne({ id });
        getRequest(props.drawerdata.lid, data.paginations.current);
        $message("success", reslut.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 添加请求 */
    async function addRequest(lid: string, num: number, apptype: string) {
      try {
        const reslut: AxiosResponse<any> = await addCode({ lid, num, apptype });
        getRequest(props.drawerdata.lid, data.paginations.current);
        $message("success", reslut.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 添加事件 */
    function onAddCode() {
      addRequest(props.drawerdata.lid, data.value, props.drawerdata.apptype);
    }

    /* 删除事件 */
    function onDeleteCode() {
      deleteRequest(props.drawerdata.lid);
    }

    /* 删除单条事件 */
    function onDeleteOneCode(record: any) {
      deleteOneRequest(record._id);
    }

    /* 一键复制事件 */
    function onCopy() {
      const code: string[] = [];
      data.codedata.forEach((element: any) => {
        code.push(element.code);
      });
      const clipboard = new ClipboardJS("#copy", {
        text: () => {
          return code.toString().replace(/\,/g, "\n");
        },
      });
      clipboard.on("success", (e: any) => {
        $message("success", "复制成功");
        e.clearSelection();
      });
    }

    /* 分页事件 */
    function onClickPagination(value: {
      current: number;
      pageSize: number;
      total: number;
    }) {
      data.paginations.current = value.current;
      getRequest(props.drawerdata.lid, value.current);
    }

    /* 状态开关事件 */
    let timer: number | null = null;
    function onChangeSwitch(checked: boolean) {
      clearTimeout(timer as number);
      timer = setTimeout(async () => {
        try {
          switch (props.drawerdata.apptype) {
            case "superModel":
              await upsuper({ id: props.drawerdata._id, codestatus: checked });
              break;
            case "apkModel":
              await upapk({ id: props.drawerdata._id, codestatus: checked });
              break;
            case "iosModel":
              await upipa({ id: props.drawerdata._id, codestatus: checked });
              break;
            case "miaoModel":
              await upmiao({ id: props.drawerdata._id, codestatus: checked });
              break;
          }
          createStore.commit("mergeData", {
            index: props.drawerdata.index,
            codestatus: checked,
          });
          if (checked) {
            $message("success", "开启成功");
          } else {
            $message("success", "关闭成功");
          }
        } catch (error) {
          $message("error", error.data.message);
        }
      }, 500);
    }

    return {
      ...toRefs(data),
      columns,
      onCopy,
      onAddCode,
      FormatTime,
      onDeleteCode,
      onDeleteOneCode,
      onChangeSwitch,
      onClickPagination,
    };
  },
};
</script>
<style lang="less" scoped>
.layout {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ant-divider-horizontal {
  margin-bottom: 0px;
}
</style>